import React, { Component } from 'react';
import { Row, Col, Icon } from 'antd';
import { PanDescConstant } from '../constants/constant_en';
import { InputGroup, HashQuestion } from "./CusInput";
import { edit_multi, edit_site, ActionConstant } from '../actions/search_action'
import { is } from 'immutable'
import { first_row_style, row_style, last_row_style, div_style } from '../styles/pan_style'


const input_style = {
    height: 28,
    width: 260,
    marginLeft: 5,
    marginRight: 5,
}

export default class CommandComponent extends Component {

    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));

    }

    render() {

        const { data, dispatch } = this.props;

        const site = data.get('content').get('site');
        const siteFiled = (
            <Row style={first_row_style}>

                <Col span={6}>
                    <label>
                        {PanDescConstant.site}&nbsp;:&nbsp;
                    </label>
                </Col>

                <Col span={18}>
                    <input
                        value={site}
                        style={input_style}
                        onChange={(event)=>{
                            dispatch(edit_site(event.target.value))}
                        }
                    />
                    <HashQuestion hash="site"/>
                </Col>

            </Row>
        );

        const getCallback = (type) => {
            return (event, index, former_text) => {
                dispatch(edit_multi(former_text, event.target.value, type, index))
            }
        }

        const intitle = data.get('content').get('intitle');
        const intitle_filed = (
            <InputGroup
                data={intitle}
                title={PanDescConstant.intitle}
                post="AND"
                style={row_style}
                hash="intitle"
                callback={getCallback(ActionConstant.type_editor_command_intitle)}/>
        )

        const inurl = data.get('content').get('inurl');
        const inurl_filed = (
            <InputGroup
                data={inurl}
                title={PanDescConstant.inurl}
                post="AND"
                style={row_style}
                hash="inurl"
                callback={getCallback(ActionConstant.type_editor_command_inurl)}/>
        )

        const inanchor = data.get('content').get('inanchor');
        const inanchor_filed = (
            <InputGroup
                data={inanchor}
                title={PanDescConstant.inanchor}
                post="AND"
                style={row_style}
                hash="inanchor"
                callback={getCallback(ActionConstant.type_editor_command_inanchor)}/>
        )

        return (
            <div style={div_style}>
                {siteFiled}
                {intitle_filed}
                {inurl_filed}
                {inanchor_filed}
            </div>
        )
    }
}

